import React, { useState } from 'react';
import { NavBar, Dropdown, Image, Tag, Button } from 'antd-mobile';
import {
    LeftOutline,
    DownOutline,
    FilterOutline
} from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom';
import '../styles/doctorList.scss';

// 医生数据接口
interface Doctor {
    id: string;
    name: string;
    title: string;
    department: string;
    hospital: string;
    price: number;
    imageUrl: string;
    specialties: string[];
}

const DoctorListPage: React.FC = () => {
    const navigate = useNavigate();
    const { department } = useParams<{ department: string }>();

    // 筛选条件
    const [filter, setFilter] = useState({
        doctor: '全部医生',
        date: '出诊日期',
        sort: '综合排序'
    });

    // 医生数据
    const [doctors] = useState<Doctor[]>([
        {
            id: '1',
            name: '张医生',
            title: '主任医师',
            department: '心内科',
            hospital: '协和医院',
            price: 150,
            imageUrl: 'https://via.placeholder.com/80',
            specialties: ['心脏病', '高血压']
        },
        {
            id: '2',
            name: '王医生',
            title: '副主任医师',
            department: '心内科',
            hospital: '协和医院',
            price: 120,
            imageUrl: 'https://via.placeholder.com/80',
            specialties: ['冠心病', '心肌炎']
        },
        {
            id: '3',
            name: '李医生',
            title: '主治医师',
            department: '心内科',
            hospital: '协和医院',
            price: 100,
            imageUrl: 'https://via.placeholder.com/80',
            specialties: ['心律失常', '心绞痛']
        }
    ]);

    const handleBack = () => {
        navigate('/home');
    };

    const handleBooking = (doctorId: string) => {
        console.log(`预约医生：${doctorId}`);
        // 导航到预约页面
        navigate(`/booking/${doctorId}`);
    };

    return (
        <div className="doctor-list-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                backArrow={<LeftOutline />}
                onBack={handleBack}
                right={<FilterOutline fontSize={18} />}
            >
                心内科医生
            </NavBar>

            {/* 筛选条件 */}
            <div className="filter-section">
                <Dropdown>
                    <Dropdown.Item
                        key="doctor"
                        title={
                            <span className="dropdown-title">
                                {filter.doctor} <DownOutline fontSize={12} />
                            </span>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, doctor: '全部医生' })}>全部医生</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, doctor: '主任医师' })}>主任医师</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, doctor: '副主任医师' })}>副主任医师</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, doctor: '主治医师' })}>主治医师</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, doctor: '住院医师' })}>住院医师</div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item
                        key="date"
                        title={
                            <span className="dropdown-title">
                                {filter.date} <DownOutline fontSize={12} />
                            </span>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, date: '全部日期' })}>全部日期</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, date: '今天' })}>今天</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, date: '明天' })}>明天</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, date: '本周' })}>本周</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, date: '下周' })}>下周</div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item
                        key="sort"
                        title={
                            <span className="dropdown-title">
                                {filter.sort} <DownOutline fontSize={12} />
                            </span>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, sort: '综合排序' })}>综合排序</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, sort: '评分最高' })}>评分最高</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, sort: '价格最低' })}>价格最低</div>
                            <div className="dropdown-option" onClick={() => setFilter({ ...filter, sort: '价格最高' })}>价格最高</div>
                        </div>
                    </Dropdown.Item>
                </Dropdown>
            </div>

            {/* 医生列表 */}
            <div className="doctor-list">
                {doctors.map(doctor => (
                    <div
                        key={doctor.id}
                        className="doctor-card"
                        onClick={() => navigate(`/doctor/${doctor.id}`)}
                    >
                        <div className="doctor-avatar">
                            <Image
                                src={doctor.imageUrl}
                                width={60}
                                height={60}
                                fit="cover"
                                placeholder=""
                                alt={doctor.name}
                            />
                        </div>
                        <div className="doctor-info">
                            <div className="doctor-header">
                                <h3 className="doctor-name">{doctor.name}</h3>
                                <span className="doctor-price">¥{doctor.price}</span>
                            </div>
                            <div className="doctor-title">
                                {doctor.title} | {doctor.department}
                            </div>
                            <div className="doctor-hospital">{doctor.hospital}</div>
                            <div className="doctor-specialties">
                                {doctor.specialties.map((specialty, index) => (
                                    <Tag
                                        key={index}
                                        className="specialty-tag"
                                        color={index % 2 === 0 ? '#e6f7ff' : '#f9f0ff'}
                                        style={{ color: index % 2 === 0 ? '#1890ff' : '#722ed1' }}
                                    >
                                        {specialty}
                                    </Tag>
                                ))}
                                <Button
                                    className="booking-btn"
                                    color="primary"
                                    onClick={(e) => {
                                        e.stopPropagation(); // 阻止事件冒泡
                                        handleBooking(doctor.id);
                                    }}
                                >
                                    预约
                                </Button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default DoctorListPage; 